<template>
	<view class="normalFooter">
		<view class="footer_btn_wrap">
			<view v-if="isShowAttr" class="footer_btn_left" @click="toChat()">
				<div class="attr_btn_wrap flex flex-align-center">
					<text class="foter_icon">1</text>
					<image :src="`${userInfo.user_picture}?x-oss-process=image/resize,m_fill,h_90,w_90`" ></image>
					<text>快速咨询</text>
				</div>
			</view>
			<view v-else class="footer_btn_left">
				<view class="btn_icon">
					<image :src="`${constant.imgUrl}design/weichat.png`"></image>
					<text>咨询</text>
				</view>
				<navigator class="btn_icon">
					<image :src="`${constant.imgUrl}design/telep.png`"></image>
					<text>拨号</text>
				</navigator>
			</view>
			<view class="footer_btn_right">
				<view class="btn_text_wrap">
					<v-getPhoneNumber class="btn_text" @cbFn="showOnlineSign" data-source="报名">
						<!-- <view class="btn_text" @click="showOnlineSign"> -->
						<!--span>
							线上报名&nbsp;&nbsp;
							<span class="gift_txt">抢预约好礼</span>
						</span-->
						<span>
							<span class="gift_txt">线上预约享专属大礼包</span>
						</span>
						<!-- <span v-if="cutDownPrice != 0.0" class="storng_text">立省{{cutDownPrice}}</span><span v-if="cutDownPrice != 0.0">万</span> -->
						<!-- </view> -->
					</v-getPhoneNumber>
				</view>
			</view>
		</view>
		<!-- 线上报名 -->
		<v-onlineSign ref="onlineSign" :dataList="preferentialData" :owner_user_id="$parent.owner_user_id"></v-onlineSign>
		<!-- 线上报名 -->
		<uni-popup ref="popup" :show="consult" width="100vw" maxHeight="100vh" type="bottom" class="modules">
			<view class="person_link">
				<div class="closemask" @click="closeWeFriendPup">
					<image :src="`${constant.imgUrl}design/addfriclose.png`"></image>
				</div>
				<view class="plink_body">
					<view class="plink_head">
						<view class="plink_user">
							<image class="usersimg"></image>
							<image :src="`${constant.imgUrl}publicicon/icon_personau.thenpng.png`" class="person_img"></image>
						</view>
						<view class="plink_right">
							<view class="plink_user_tit ellipsis_line_com">{{ userInfo.nick_name }}</view>
							<view class="p">
								<text class="service_num">已服务{{ userInfo.count_data.totalVistor }}名业主</text>
								<text class="separate_text">|</text>
								<text>{{ userInfo.role_name }}</text>
								<text class="separate_text">|</text>
								<text>{{ userInfo.working_years }}年经验</text>
							</view>
							<view v-if="userInfo.motto != 'null'">{{ userInfo.motto }}</view>
						</view>
					</view>
					<image :src="`${constant.imgUrl}publicicon/ixon_servicedev.png`" class="icon_service"></image>
					<view class="plink_btom">
						<div @click="addweichat">
							<image :src="`${constant.imgUrl}design/weichat.png`"></image>
							<text>添加微信</text>
						</div>
						<div @click="callPhone">
							<image :src="`${constant.imgUrl}design/telep.png`"></image>
							<text>拨打电话</text>
						</div>
					</view>
				</view>
			</view>
		</uni-popup>
		<v-addWechat ref="addWechat"></v-addWechat>
	</view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import OnlineSign from '@/pages/components/onlineSign'
import AddWechat from '@/pages/components/addWechat'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
import { getGiftInfo } from '@/api/gift'
import { jumpToChat } from '@/utils/common'
import { getBasicUser } from '@/utils/auth'

export default {
	name: 'normal-footer',
	components: {
		'v-onlineSign': OnlineSign,
		'v-getPhoneNumber': getPhoneNumber,
		'v-addWechat': AddWechat,
		uniPopup
	},
	props: {
		// 判断显示的咨询样式
		isShowAttr: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			consult: false,
			preferentialData: [],
			constant: this.$constant,
			nullQrCode: this.$constant.imgUrl + 'common/null_qr_code.png'
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' }),
		cutDownPrice() {
			const prices = this.preferentialData.map(item => {
				return item.servicePrice
			})
			let total = 0
			for (let i = 0; i < prices.length; i++) {
				total += parseInt(prices[i])
			}
			total = total ? total / 10000 : 0
			return total.toFixed(1)
		},
		getQrCode() {
			if (this.userInfo && this.userInfo.wechat_qrcode) {
				return this.userInfo.wechat_qrcode
			} else {
				return this.nullQrCode
			}
		}
	},
	mounted() {
		// this.$nextTick(() => {
		getBasicUser(this.$parent.owner_user_id).then(res => {
			console.log(res, '11111111111')
			this.init(res.user_id)
		})
		// })
	},
	// watch: {
	// 	userInfo(value) {
	// 		this.init()
	// 	}
	// },
	methods: {
		async init(id) {
			// 获取礼包信息
			const params = {
				store_id: id || this.userInfo.user_id
			}
			await getGiftInfo(params).then(res => {
				this.preferentialData = res.data
			})
		},
		// 打开线上报名
		showOnlineSign() {
			uni.showLoading({
				title: '加载中...'
			})
			this.init(this.userInfo.user_id).then(() => {
				uni.hideLoading()
				this.$refs.onlineSign.openPopup()
			})
		},

		// 去联系客服
		toChat() {
			if (this.userInfo.role_id == 1 || this.userInfo.role_id == 2) {
				jumpToChat()
			} else {
				this.addwefriend()
			}
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.userInfo.contact_phone
			})
		},
		addwefriend() {
			// this.consult = true
			this.$refs.popup.open()
		},
		closeWeFriendPup() {
			this.$refs.popup.close()
		},
		addweichat() {
			// 添加微信事件
			this.consult = false

			// let qrCodeUrl = this.getQrCode
			let arr = []
			arr[0] = this.getQrCode
			uni.previewImage({
				current: this.getQrCode,
				urls: arr
			})
			// this.$refs.addWechat.show()
			// this.addfriend = true;
		}
	}
}
</script>

<style lang="scss" scoped>
	.gift_txt {
		color: #e33737;
	}
	.normalFooter {
		width: 100%;
		height: 100%;
		.modules {
			border-radius: 20px 20px 0 0;
		}
		.footer_btn_wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			.footer_btn_left {
				width: calc(44% - 60px);
				height: 100%;
				padding: 0 30px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.btn_icon {
					display: flex;
					align-items: center;
					image {
						width: 50px;
						height: 50px;
					}
					text {
						font-size: 24px;
						color: #999;
						line-height: 1;
					}
				}
				.attr_btn_wrap {
					height: 60px;
					text-align: center;
					line-height: 60px;
					font-size:30px;
					position: relative;
					// display: inline-block;
					background-color: #fff;
					image {
						width: 60px;
						height: 60px;
						border-radius: 50%;
						margin-right: 10px;
					}
					.foter_icon {
						width: 34px;
						height: 34px;
						position: absolute;
						top: -10px;
						text-align: center;
						line-height: 34px;
						border-radius: 50%;
						background: -webkit-linear-gradient(rgb(255, 4, 0), rgb(255, 58, 123));
						font-size: 22px;
						left: 100%;
						color: white;
					}
				}
			}
			.footer_btn_right {
				width:60%;
				height: 100%;
				color: #3a1b04;
				// position: relative;
				.btn_text_wrap {
					height: 120px;
					position: absolute;
					bottom: 0;
					right: 0;
					width: 56%;
					display: table;
					.btn_text {
						height: 100%;
						background: url('https://wximg.meijiabang.com/hkds/miniapp/images/design/sign_btn_back.png');
						background-size: 100% 100%;
						display: table-cell;
						vertical-align: middle;
						font-size: 30px;
						.storng_text {
							color: #ff1628;
							font-weight: 600;
						}
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.normalFooter {
		.person_link {
			width: 100%;
			height: 560px;
			background: white;
			border-radius: 20px 20px 0 0;
		}

		.closemask {
			position: absolute;
			width: 30px;
			height: 30px;
			right: 39px;
			top: 39px;
		}

		.closemask image {
			width: 30px;
			height: 30px;
		}

		.plink_body {
			width: 670px;
			height: 500px;
			// margin-top: 88px;
			margin-left: 30px;
			// margin-bottom: 20px;
            padding-top: 50px;
		}

		.plink_head {
			height: 150px;
			width: 100%;
            display: flex;
            align-items: flex-start
		}

		.plink_user {
			width: 120px;
			height: 120px;
			// float: left;
			border: 1px solid #cccccc; /*no*/
			border-radius: 60px;
		}

		.plink_user .usersimg {
			width: 100%;
			height: 120px;
			border-radius: 60px;
		}

		.plink_user .person_img {
			width: 110px;
			height: 34px;
			// float: left;
			margin-left: 5px;
			margin-top: -10px;
		}

		.plink_right {
			margin-top: 10px;
			margin-left: 20px;
			width: 78%;
			height: auto;
			text-align: left;
            .plink_user_tit {
	            font-size: 40px;
	            font-weight: bold;
	            margin-bottom: 20px;
            }
		}

		.plink_right .p .company_icon {
			width: 34px;
			height: 34px;
			// float: left;
			margin-right: 5px;
		}

		.plink_right .p .service_num {
			color: #ee6501;
		}

		.plink_btom {
			width: 100%;
			height: 90px;
			margin-top: 33px;
			// margin-bottom: 80px;
			@include direction(center, space-between);
            & > div {
			    @include direction(center, center);
			    width: 325px;
			    height: 90px;
			    border: 2px solid rgba(51, 51, 51, 0.4);
			    background: white;
			    border-radius: 45px;
			    line-height: 90px;
			    font-size: 30px;
			    color: rgb(102, 102, 102);
                image {
			        width: 43px;
			        height: 43px;
			        // margin-left: 72px;
			        // margin-top: 24px;
                }
                text {
			        margin-left: 10px;
                }
            }
		}

		.icon_service {
			width: 100%;
			height: 120px;
			margin-top: 47px;
		}

        .separate_text {
            margin: 0 10px;
        }
	}
</style>
